import React, { memo, useState, useEffect } from 'react'
import {
  LeftOutlined,
  RightOutlined,
  HomeOutlined,
  MinusOutlined,
  ArrowsAltOutlined,
  GoogleOutlined,
  SkinOutlined,
  GithubOutlined,
  RestOutlined
} from '@ant-design/icons'
import {withRouter} from 'react-router-dom'
import { Input, Popover } from 'antd'
import screenFull from 'screenfull'
import { AppHeaderWrap } from './style'
import ajax from '../../service/index'
import trashbin from '../../assets/img/icon-shanchu.png'

const { Search } = Input
const AppHeader = memo((props) => {
  const [isFull, setIsFull] = useState(false)


  const goToHome = () => {
    props.history?.push('/')
  }

  const fullScreen = () => {
    screenFull.request()
  }
  const exitScreen = () => {
    screenFull.exit()
  }

  const content = (
    <div>
      <div className="header-title">
        <span>搜索历史</span>
        <img src={trashbin} alt="删除" style={{ width: 18, height: 18, marginLeft: 5 }} />
      </div>
      <div className="header-content">

      </div>
    </div>
  );

  return (
    <AppHeaderWrap>
      <div className="header-left">
        <div className="left-icon">
          <div className="comm home" onClick={() => goToHome()}>
            <HomeOutlined />
          </div>
          <div className="comm line" onClick={() => exitScreen()}>
            <MinusOutlined />
          </div>
          <div className="comm enlarge" onClick={() => fullScreen()}>
            <ArrowsAltOutlined />
          </div>
        </div>
        <div className="arrow">
          <span onClick={() => props.history.go(-1)}>
            <LeftOutlined className="back" />
          </span>
          <span onClick={() => props.history.goForward()}>
            <RightOutlined className="forward" />
          </span>
        </div>
      </div>
      <div className="header-right">
        <div className="search">
          <Popover placement="bottom" content={content} trigger="click">
            <Search placeholder="请输入内容" style={{ width: 200 }} />
          </Popover>
        </div>
        <div className="profile">
          <img src="" alt="" />
          <SkinOutlined />
          <GoogleOutlined />
          <GithubOutlined />
        </div>

      </div>
    </AppHeaderWrap>
  )
})


export default withRouter(AppHeader)